<!-- 我的积分 -->
<template>
	<view class="score">
		<view class="score_content">
			<!-- 头部卡片 -->
			<view class="card">
				<p>{{ card_num }}</p>
				<view class="button1" @click="$navigateTo(taskUrl)">
					<span>赚积分</span>
				</view>
				<view class="button2" @click="$navigateTo(taskUrl)">
					<span>共享积分</span>
				</view>
			</view>
			<!-- 积分明细，积分规则 -->
			<view class="integral">
				<tabbar id="tabbar" :active="active" :showLabel="false" :tab="tab" @change_status="change_status"></tabbar>
				<!-- 积分明细 -->
				<view class="detailed" v-if="active == 0">
					<scroll-view 
						:refresher-triggered="showRefresh" 
						@refresherpulling="pulling"
						@refresherrefresh="refresh" 
						@refresherrestore="restore"
                        @scrolltoupper="upper"
                        @scrolltolower="lower"
						refresher-enabled
						scroll-y="true" 
						:style="{height: showHeight}" 
						>
						<view class="item" v-for="(item,index) in showList" :key="index">
							<view class="item_top">
								<p>{{ item.text }}</p>
								<span :class="item.num.replace(rule,'') == '-' ? 'color': ''">{{ item.num }}</span>
							</view>
							<view class="item_bottom">
								<span>{{ item.time }}</span>
								<span>剩余 {{ item.num1 }}</span>
							</view>
						</view>
						<view class="noData" v-if="showList.length === list.length">
							--- 已经到底了 ---
						</view>
					</scroll-view>
				</view>
				<!-- 积分规则 -->
				<view class="rules" v-if="active == 1">
					<view class="rule" v-for="(item,index) in rules" :key="index">
						<view class="title">{{ item.title }}</view>
						<view class="text">
							<p>{{ item.text }}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				taskUrl: '/pages/user/score/earn/index',
				rule: /[0-9]+/g,
				// 头部卡片
				card_num: 9999999,
				// 积分明细，积分规则
				active: 0,
				tab: [{
						id: 0,
						label: '积分明细',
					},
					{
						id: 1,
						label: '积分规则',
					},
				],
				// 积分明细
				showRefresh: false,			// 是否开启下拉刷新
				currentPage: 1,				// 当前页
				showCount: 10,            	// 默认显示几条
				showHeight: 0,				// 显示的高度
                // safeArea: 0,                // 界面高度
                cardHeight:0,               // card高度
				showList: [],				// 显示的列表
				list: [{
						id: 0,
						text: '注册积分商城',
						num: '+300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 1,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 2,
						text: '注册积分商城',
						num: '+300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 3,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 4,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 5,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 6,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 7,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 8,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 9,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 10,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 11,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 12,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					},
					{
						id: 13,
						text: '注册积分商城',
						num: '-300',
						time: '08-08 17:20',
						num1: 3000
					}
				],
				//积分规则
				rules: [{
						id: 0,
						title: '什么是积分活动',
						text: '屏南联社（以下统一称“本行”）积分活动适用于本行的个人客户，凡在本行开个人账户（借记卡、定期存款）、手机银行、微信银行（绑定用户）、短信银行等业务的个人客户，办理符合我行个人积分记分规则的各类业务、均可获得我行赠送的相应积分，累计的积分可用于兑换积分礼品、相关服务、参与活动及进行积分消费等活动。'
					},
					{
						id: 1,
						title: '什么是积分活动',
						text: '屏南联社（以下统一称“本行”）积分活动适用于本行的个人客户，凡在本行开个人账户（借记卡、定期存款）、手机银行、微信银行（绑定用户）、短信银行等业务的个人客户，办理符合我行个人积分记分规则的各类业务、均可获得我行赠送的相应积分，累计的积分可用于兑换积分礼品、相关服务、参与活动及进行积分消费等活动。'
					},
				],
			};
		},
		computed: {
            ...mapState({
                safeArea: state => state.init.data.safeArea
            })
        },
		methods: {
			change_status(index) {
				this.active = index
			},
			// 下拉刷新
			pulling() {
				setTimeout(() => {
					this.showRefresh = true
				})
                // #ifdef MP-ALIPAY
                uni.startPullDownRefresh();
                // #endif
			},
			refresh() {
				setTimeout(() => {
					this.showRefresh = false
					this.showList = this.countList(this.showCount)
				},1000)
			},
			restore() {
				uni.showToast({
					title: '刷新成功'
				})
			},
            // 到顶刷新
            upper(){
                
            },
			// 上拉加载
			lower() {
				if(this.list.length <= this.showList.length) {
					return ;
				}
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					this.currentPage++;
					this.countList(this.currentPage * this.showCount)
					uni.hideLoading()
				},1000)
			},
			// 上拉加载数据
			countList(end) {
				return this.showList = this.list.slice(0, end)
			}
		},
        // #ifdef MP-ALIPAY
        /*
        *在运行支付宝小程序时发现我的积分页面不能下拉刷新，需要在支付宝小程序根目录下app.json 中的 window 项下添加 "allowsBounceVertical": "YES"
        *有其他问题请参考支付宝小程序官方文档   
        */
        onPullDownRefresh() {
            let that = this;
            uni.startPullDownRefresh({
                success:function(){
                    that.showList = that.countList(that.showCount)
                }
            });
            setTimeout(function() {
                uni.stopPullDownRefresh();
            },1000);
        },
        // #endif
		beforeCreate() {},
		created() {
			let that = this;
            // #ifdef MP-WEIXIN
			that.$getDom('#tabbar').exec(data => {
				let topHeight = data[0].top + data[0].height;
				that.showHeight = that.safeArea - topHeight + 'px';
			})
            // #endif
            // #ifdef MP-ALIPAY
                that.$getDom('.card').exec((res) => {
                    that.cardHeight = res[0].height;
                })
                uni.getStorage({
                    key:'tabbarDom',
                    success:function(res){
                        let topHeight = that.cardHeight + res.data[0].height;
                        that.showHeight = that.safeArea - topHeight + 'px';
                    }
                })
            // #endif
		},
		beforeMount() {},
		mounted() {
			this.countList(this.showCount)
		},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";

	.change {
		font-weight: 600;
		padding-bottom: 20rpx;
		position: relative;

		&:after {
			content: "";
			width: 32rpx;
			height: 8rpx;
			border-radius: 999px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #FF504C;
		}
	}

	.color {
		color: #666 !important;
	}
</style>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
